<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% 
	String webpath = request.getContextPath(); 
	String path =  request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + webpath +"/";
	request.setAttribute("path", path);
%>
<html>
<head>
	<title>新增列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- this page specific styles -->
    <link rel="stylesheet" href="${path}static/detail/css/compiled/new-user.css" type="text/css" media="screen" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<%@ include file="../common/common.jsp"%>
	
    <link rel="stylesheet" href="${path}static/detail/css/compiled/ui-elements.css" type="text/css" media="screen" />
    <script type="text/javascript">
	    // 添加全局站点信息
	    var BASE_URL = '/xlz-sy-web';
    </script>
    <script src="${path}static/detail/js/bootstrap-modal.js"></script>
    <!--引入CSS-->
	<link rel="stylesheet" type="text/css" href="${path}static/detail/js/webuploader.css">
	<!--引入JS-->
	<script type="text/javascript" src="${path}static/detail/js/webuploader.min.js"></script>
	<link rel="stylesheet" href="${path}static/upload/upload.css" type="text/css" />
	<link rel="stylesheet" href="${path}static/upload/demo.css" type="text/css" />
	<script type="text/javascript" src="${path}static/upload/upload.js"></script>
	<script type="text/javascript" src="${path}static/upload/demo.js"></script>
</head>
<body>
	<%@ include file="../common/head.jsp" %>
    <!-- sidebar -->
    <%@ include file="../common/left.jsp" %>
    <!-- end sidebar -->
	<!-- main container -->
	<form id="saveForm" action="${path}uploadFile/saveWork.do" method="post">
	    <div class="content">
	        <div class="container-fluid">
	            <div id="pad-wrapper" class="new-user" >
	                <div class="row-fluid header" >
	                    <h3  style="padding-left: 320px;">作品列表上传</h3>
	                </div>
	                <div class="row-fluid form-wrapper">
	                    <!-- left column -->
	                    <div class="span9 with-sidebar">
	                        <div class="container">
	                        	<div class="field-box" >
	                              <label> 标题<font style="color:red;">*:</font>:</label>
	                              <input type="text" name="title" id="title" class="span8" style="width: 455px;"/>
		                        </div>
		                        <div class="field-box" >
	                              <label> 作者<font style="color:red;">*:</font>:</label>
	                              <input type="text" name="workName" id="workName" class="span8" style="width: 455px;"/>
		                        </div>
		                        <div class="field-box" >
	                              <label> 作品简短描述<font style="color:red;">*:</font>:</label>
	                              <input type="text" name="description" id="description" class="span8" style="width: 455px;"/>
		                        </div>
		                        <div class="field-box" >
	                              <label> 作者电话<font style="color:red;">*:</font>:</label>
	                              <input type="text" name="workPhone" id="workPhone" class="span8" style="width: 455px;"/>
		                        </div>
	                        	<div class="span12 field-box">
	                            <label>作品类别<font style="color:red;">*:</font>:</label>
	                            <div class="ui-select span5" style="width: 300px;">
	                                 <select id="type" name="type" style="width: 300px;">
			                                <option value="RX" selected="selected">人像</option>
			                                <option value="FJ">风景</option>
			                                <option value="RW">人文</option>
			                                <option value="YS">艺术</option>
			                                <option value="OM">欧美</option>
			                                <option value="YX">印象</option>
			                                <option value="XS">写实</option>
			                                <option value="SH">时尚</option>
			                                <option value="QX">情绪</option>
			                                <option value="QT">其他</option>
	                                 </select>
	                              </div>
	                           </div>
	                           
	                           <div class="field-box" >
	                              <label> 是否发布<font style="color:red;">*:</font>:</label>
	                              <div class="slider-frame primary">
	                                <span data-on-text="ON" data-off-text="YES" id="states" class="slider-button">YES</span>
	                              </div>
	                              <input type="hidden" name="state" id="state" value="YES"/>
		                        </div>
	                           <div class="field-box" >
	                              <label> 是否最新<font style="color:red;">*:</font>:</label>
	                              <div class="slider-frame primary">
	                                <span data-on-text="ON" data-off-text="YES" id="isNews" class="slider-button">YES</span>
	                              </div>
	                              <input type="hidden" name="isNew" id="isNew" value="YES"/>
		                        </div>
		                         <div class="field-box" >
	                              <label> 封面图片<font style="color:red;">*:</font></label>
	                              <!--  <a href="javascript:;" id="openFileWindow" class="btn-flat primary">上传封面</a> -->
	                                 <input type="hidden" name="coverUrl" id="coverUrl" />
									 <div id="coverUrlImg"></div>
		                        </div>
		                         <!--dom结构部分
								<div id="uploader-demo" style="width: 400px;height: 400px;">
								    <input type="hidden" class="form-control" id="idnumberurl" name="idnumberurl"  value="">
									<div id="idnumberurlImg"></div>
								</div>-->
								<div class="field-box">
								 	<label> 继续添加图片<font style="color:red;">*:</font></label>
									<div id="filePicker2">
									 <a href="javascript:;" class="btn-flat primary">添加图片</a>
									 <div id="rt_rt_19uitqjc1g4k17en1bh5otv13386" style="position: absolute; top: 0px; left: 10px; width: 94px; height: 42px; overflow: hidden; bottom: auto; right: auto;">
									 <input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
									 <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div>
								</div>
								 <div class="field-box">
									 <label>上传图片<font style="color:red;">*:</font></label>
									<div id="uploader" class="wu-example">
								    <div class="queueList">
							        <div id="dndArea" class="placeholder">
							            <div id="filePicker" class="webuploader-container"><div class="webuploader-pick">点击选择图片</div><div id="rt_rt_19ugnfhf51n9m607uet600sc61" style="position: absolute; top: 0px; left: 448px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div>
							            <p>或将照片拖到这里，单次最多可选10张</p>
							        </div>
							    	<ul class="filelist" style="display: none;"></ul>
							    	</div>
							    	</div>
							    </div>
		                         <div class="field-box">
	                               <div id="html_image" class="name" style="color: red;"></div>
		                        </div>
		                        <div id="images_server">
		                        
		                        </div>
	                            <div class="span11 field-box actions" style="padding-right: 800px;">
	                            		<a href="javascript:;" id="saveWork" class="btn-glow success">保存</a>
	                             </div>
	                        </div>
	                    </div>
	                    
	 				</div>
				</div>
			</div>
	</div>
</form>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" style="top:8%;">
	<div class="modal-header"><button class="close" type="button" data-dismiss="modal" onclick="close();">×</button>
	
	</div>
	<!-- <div class="modal-body" style="float: right;">
		<a href="#" class="btn-flat success">保存</a>
	</div> -->
</div>
    <script type="text/javascript">
    
        $(function () {

            // toggle form between inline and normal inputs
            var $buttons = $(".toggle-inputs button");
            var $form = $("form.new_user_form");

            $buttons.click(function () {
                var mode = $(this).data("input");
                $buttons.removeClass("active");
                $(this).addClass("active");

                if (mode === "inline") {
                    $form.addClass("inline-input");
                } else {
                    $form.removeClass("inline-input");
                }
            });
           
           		// 营业执照正面
           		$("#licenseurlImg").uploadImg({
           			urlId : "licenseurl",
           			showImg : $('#licenseurl').val()
           		});
           		
           		$("#saveWork").click(function(){
           			var title = $("#title").val();
           			if(title == null || title ==""){
           				alert("标题 不能为空");
           				return false;
           			}
           			var workName = $("#workName").val();
           			if(workName == null || workName ==""){
           				alert("作者 不能为空");
           				return false;
           			}
           			var description = $("#description").val();
           			if(description == null || description ==""){
           				alert("描述 不能为空");
           				return false;
           			}
           			var workPhone = $("#workPhone").val();
           			var partten = /^1[3,5,8]\d{9}$/;
           			if(workPhone == null || workPhone =="" || !partten.test(workPhone)){
           				alert("电话 不能为空或者手机号不对");
           				return false;
           			}
           			var coverUrl = $("#coverUrl").val();
           			if(coverUrl == null || coverUrl ==""){
           				alert("描述 不能为空");
           				return false;
           			}
           			var length = $("#images_server").find("input[name='image']");
           			if(length < 0){
           				alert("图片 不能为空");
           				return false;
           			}
           			$("#saveForm").submit();
           		});
            });

            // Switch slide buttons
            $('#states').click(function() {
                if ($(this).hasClass("on")) {
                    $(this).removeClass('on').html($(this).data("off-text"));   
                } else {
                    $(this).addClass('on').html($(this).data("on-text"));
                }
                $('#state').val($(this).text());
            });
            // Switch slide buttons
            $('#isNews').click(function() {
                if ($(this).hasClass("on")) {
                    $(this).removeClass('on').html($(this).data("off-text"));   
                } else {
                    $(this).addClass('on').html($(this).data("on-text"));
                }
                $('#isNew').val($(this).text());
            });
            $("#openFileWindow").click(function(){
            	
            });
            $("#coverUrlImg").uploadImg({
        		urlId : "coverUrl",
        		showImg : $('#coverUrl').val()
        	});
            
       
       /*  function close(){
        	$('#myModal').modal('hide');
        } */
        
        
        
     
    </script>
</body>
</html>